<template>
<div class="about">
  <h2>{{count}}</h2>
  <hr>
  <button @click="increment">加1</button>
</div>
</template>

<script>
import {
  ref
} from "vue"
export default {
  beforeCreate () {
    console.log('beforeCreate()')
  },
  // 在beforeCreate()之前执行, 不能通过this访问组件对象
  setup() {
    console.log('setup()', this)
    
    // 包含响应式数据的引用对象
    const count = ref(0) // count是一个引用对象, 内部包含存储数据的value属性
    console.log(count, count.value)

    // 更新响应式数据的函数
    const increment = () => {
      count.value++
    }

    return { // 对象中的属性和方法, 模板可以直接访问
      count,
      increment
    }
  }
}
</script>
